<template>
    <span 
    @click="_click" 
    :class="[[prefixCls+'-switch'],checked?[prefixCls+'-switch-checked']:'',disabled?'disabled':'',size?[prefixCls+'-switch-'+size]:'']"
    :style="_setColor()">
        <i :class="[prefixCls+'-switch-inner']">
            <slot name="open" v-if="checked"></slot>
            <slot name="close" v-else></slot>
        </i>
    </span>
</template>
<script>
import { prefixCls } from '../prefix'
import './switch.css'

export default {
    name: `${prefixCls}Switch`,
    data () {
        return {
            prefixCls: prefixCls,
            checked: this.value
        }
    },
    props: {
        value: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
        size: String,
        trueColor: String,
        falseColor: String,
        change: Function
    },
    watch:{
        value(v) {
            this.checked = v
        }
    },
    methods: {
        _click(){
            if (!this.disabled) {
                this.checked = !this.checked;
                this.$emit('input', this.checked);
                this.$emit('change',this.checked);
                this.change ? this.change(this.checked) : "";//回调
            }
        },
        _setColor(){
            if(this.checked) {
                if(this.trueColor) {
                    return 'background-color:'+this.trueColor+';border-color:'+this.trueColor+';'
                }
            }else{
                if(this.falseColor) {
                    return 'background-color:'+this.falseColor+';border-color:'+this.falseColor+';'
                    
                }
            }
        }
    },
}
</script>